<template>
  <el-popover
    ref="popoverRef"
    placement="right"
    title="批量设置"
    :width="400"
    trigger="click"
  >
    <div class="cpsBatchQuery">
      <el-input
        placeholder="支持复制或输入关键词"
        v-model="keyWord"
        clearable
        @change="v => handlerBatchBlur(v)"
        @blur="e => handlerBatchBlur(e.target.value)"
      ></el-input>
      <el-tag
        closable
        @close="handlerDelBatchItem(tIndex)"
        class="mr-10px mt-6px"
        v-for="(t, tIndex) in batchTags"
        :key="t"
      >
        {{ t }}</el-tag
      >
      <div class="mt-10px text-right">
        <el-button type="primary" size="small" @click="onReset">重置</el-button>
        <el-button type="primary" size="small" @click="onConfirm"
          >确定</el-button
        >
      </div>
    </div>
    <template #reference>
      <el-icon size="16" @click="showPopover(true)" class="cursor-pointer"
        ><DocumentCopy
      /></el-icon>
      批量查询
    </template>
  </el-popover>
</template>
<script setup>
import { ref } from 'vue'
const emit = defineEmits(['comfirm'])
const batchTags = ref([])
const keyWord = ref('')
const popoverRef = ref(null)
// 批量查询输入失去焦点
const handlerBatchBlur = value => {
  const valueStr = value.replaceAll(/\t|\n|\s+/g, ' ')
  const values = valueStr.split(' ').filter(item => {
    return item.trim() !== ''
  })

  batchTags.value = Array.from(new Set([...values, ...batchTags.value]))
  keyWord.value = undefined
}
const handlerDelBatchItem = index => {
  batchTags.value.splice(index, 1)
}
const onReset = () => {
  keyWord.value = undefined
  batchTags.value = []
}
const onConfirm = () => {
  emit('comfirm', batchTags.value)
  showPopover(false)
}
const showPopover = flag => {
  flag ? popoverRef.value?.show() : popoverRef.value?.hide()
}
</script>
<style lang="scss" scoped></style>
